<template>
  <el-dialog :title="title" width="80%" :visible.sync="visible" :append-to-body="true" :modal-append-to-body="true">
    <el-form :inline="true">
      <el-form-item label="条码：">
        <el-input v-model="recordInfo.queryForm.barCode" placeholder="请输入商品条码查询" />
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input v-model="recordInfo.queryForm.goodsName" placeholder="输入商品名称查询" />
      </el-form-item>
      <el-form-item label="类别：">
        <el-cascader
          v-model="goodsCategoryIdList"
          placeholder="请选择类别"
          :props="props"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
      <el-form-item style="margin-left: 40px">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" v-loading="recordInfo.loading" class="table-default" :data="recordInfo.list" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="43" fixed="left" align="center" />
      <el-table-column prop="barCode" label="商品条码" show-tooltip-when-overflow width="140" align="center" />
      <el-table-column prop="goodsName" label="商品名称" show-tooltip-when-overflow align="center" />
      <el-table-column prop="defaultPictureDownloadCode" label="图片" width="80" align="center">
        <template v-slot="scope">
          <image-show :md5="scope.row.defaultPictureDownloadCode" style="width:50px;height:50px" />
        </template>
      </el-table-column>
      <el-table-column prop="unitText" label="单位" show-tooltip-when-overflow width="50" align="center" />
      <el-table-column prop="specifications" label="规格" show-tooltip-when-overflow width="100" align="center" />
      <el-table-column prop="brandName" label="品牌" show-tooltip-when-overflow width="100" align="center" />
      <el-table-column prop="shelfLifeDays" label="保质期" show-tooltip-when-overflow width="100" align="center">
        <template v-slot="scope">
          {{ scope.row.shelfLifeDays }}天
        </template>
      </el-table-column>
      <el-table-column prop="productionPlace" label="产地" show-tooltip-when-overflow width="100" align="center" />
    </el-table>
    <pagination
      v-show="recordInfo.total > 0"
      :total="recordInfo.total"
      :page.sync="recordInfo.queryForm.page"
      :limit.sync="recordInfo.queryForm.pageSize"
      @pagination="getRecordList"
    />
  </el-dialog>
</template>

<script>
import ListMixin from '@/mixins/modules/list'
import filters from '@/filters/index'
import Pagination from '@/components/Pagination'
import imageShow from '@/components/imageShow'
import api from '@/api'

export default {
  components: { Pagination, imageShow },
  filters: { ...filters },
  mixins: [ListMixin],
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level === 0) {
              const arr = []
              api.getGoodsCategoryList({ parentId: 0, page: 1, pageSize: 999 }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: false
                    }
                  )
                })
                resolve(arr)
              })
            }
            if (node.level === 1) {
              // eslint-disable-next-line no-redeclare
              const arr = []
              api.getGoodsCategoryList({ parentId: node.value, page: 1, pageSize: 999 }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: false
                    }
                  )
                })
                resolve(arr)
              })
            } else if (node.level === 2) {
              // eslint-disable-next-line no-redeclare
              const arr = []
              api.getGoodsCategoryList({ parentId: node.value, page: 1, pageSize: 999 }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push(
                    {
                      value: item.goodsCategoryId,
                      label: item.categoryName,
                      leaf: true
                    }
                  )
                })
                resolve(arr)
              })
            }
          }, 100)
        }
      },
      title: '添加商品',
      visible: false,
      recordInfo: {
        queryForm: {
          page: 1,
          pageSize: 10,
          state: [],
          returnCount: true,
          goodsName: '',
          goodsCode: '',
          barCode: '',
          goodsCategoryId: ''
        },
        requestUrl: this.$api.getGoodsList,
        loading: false,
        list: [],
        total: 0,
        multipleSelection: []
      },
      callbackFunc: null,
      autoGetList: false,
      multipleSelection: [],
      goodsCategoryIdList: []
    }
  },
  computed: {},
  created() {
  },
  methods: {
    init(callback) {
      this.callbackFunc = callback
      this.visible = true
      this.reset()
      this.recordInfo.total = 0
      this.recordInfo.list = []
      this.handleSearch()
    },
    reset() {
      this.recordInfo.queryForm = {
        page: 1,
        pageSize: 10,
        state: [],
        returnCount: true,
        goodsName: '',
        goodsCode: '',
        barCode: '',
        goodsCategoryId: ''
      }
    },
    couponCoinAddCancel() {
      this.couponCoinAddReset()
      this.visible = false
    },
    handleSelectionChange(val) {
      this.recordInfo.multipleSelection = val
    },
    handleAdd() {
      if (this.recordInfo.multipleSelection.length === 0) {
        return this.$message({ type: 'warning', message: '请先勾选商品' })
      }
      this.visible = false
      if (this.callbackFunc) {
        this.callbackFunc(this.recordInfo.multipleSelection)
      }
    },
    async handleSearch() {
      let loading
      try {
        loading = this.$loading({
          lock: true,
          text: '请稍等...'
        })
        const params = { ...this.recordInfo.queryForm }
        if (this.recordInfo.queryForm.barCode.length === 18) {
          params.goodsId = this.recordInfo.queryForm.barCode
          delete params.barCode
        } else {
          params.barCode = this.recordInfo.queryForm.barCode
          delete params.goodsId
        }
        if (this.recordInfo.queryForm.barCode.length === 0) {
          delete params.barCode
        }
        if (this.recordInfo.queryForm.goodsName.length === 0) {
          delete params.goodsName
        }
        if (undefined !== this.goodsCategoryIdList && this.goodsCategoryIdList.length > 0) {
          params.goodsCategoryId = this.goodsCategoryIdList[this.goodsCategoryIdList.length - 1]
        }
        delete params.state
        delete params.goodsCode
        const getRecordResult = await this.$api.getGoodsList(params)
        // 根据配送单位替换中大包装字段
        for (const i in getRecordResult.list) {
          if (getRecordResult.list[i].unitType === 2) {
            getRecordResult.list[i].unitText = getRecordResult.list[i].unitTextByMiddle
            getRecordResult.list[i].barCode = getRecordResult.list[i].barCodeByMiddle
            getRecordResult.list[i].specifications = getRecordResult.list[i].specificationsByMiddle
            getRecordResult.list[i].itemNumber = getRecordResult.list[i].itemNumberByMiddle
          } else if (getRecordResult.list[i].unitType === 3) {
            getRecordResult.list[i].unitText = getRecordResult.list[i].unitTextByBig
            getRecordResult.list[i].barCode = getRecordResult.list[i].barCodeByBig
            getRecordResult.list[i].specifications = getRecordResult.list[i].specificationsByBig
            getRecordResult.list[i].itemNumber = getRecordResult.list[i].itemNumberByBig
          }
        }
        this.recordInfo.list = getRecordResult.list
        this.recordInfo.total = Number(getRecordResult.count)
      } catch (err) {
        console.error(err)
      } finally {
        loading && loading.close()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
